import Taro, { Component } from '@tarojs/taro'
import './index.less'

import {
  View,
  Text,
  Image,
  Icon,
  Button,
  Swiper,
  SwiperItem,
  ScrollView,
} from '@tarojs/components'

/**
 * 1.第一步监听页面滚动获取滚动高度
 * 2.获取view距离顶部的高度 滚动的时候进行计算 
 */

export default class Scroll extends Component {
  constructor() {
    super(...arguments)
  }

  onPageScroll(e) {
    console.log(e)
  }

  render() {
    const vStyleA = {
      height: '150px',
      'background-color': 'rgb(26, 173, 25)'
    }
    const vStyleB = {
      height: '150px',
      'background-color': 'rgb(39,130,215)'
    }
    const vStyleC = {
      height: '150px',
      'background-color': 'rgb(241,241,241)',
      color: '#333'
    }
    return (
          <View>
            <View style={vStyleA}>A</View>
            <View style={vStyleB}>B</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
            <View style={vStyleC}>C</View>
          </View>
    )
  }
}